<template>
  <div>
    <banner-bottom>
      <div class="banner"></div>
      <!-- banner结束 -->
      <!-- about-cont开始 -->
      <div class="aboutus">
        <div class="about-cont w1200">
          <h2>关于我们</h2>

          <img
            src="@/assets/img/about-us/tu.png"
            width="614"
            height="385"
            alt="about-us"
          />
          <div class="cont flex column">
            <h3>橙券</h3>
            <div class="sss"></div>
            <div class="aboutinfo">
              <p>
                山东鼎信网络科技有限公司(DECENT)成立于2010年，拥有近300人的专业团队，是国内领先的权益营销解决方案提供商之一，是山东省双软认证企业、国家级高新技术企业。
              </p>
              <p>
                公司自主研发的权益营销平台——橙券，运用互联网+精准营销理念，以积分和电子凭证为载体，通过金融权益、积分运营、营销支撑服务的商业模式，聚焦银行、保险、金融、传媒、互联网、通信等大型行业机构，集合生活服务类优质品牌资源，提供上下游一体的综合权益营销解决方案，提升用户体验，创造社会价值。构建“跨地域、跨品牌、多元化、融合性”的以“产业互联、创新融合”
                的多方共赢的生态模式。
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- warp-about-us结束 -->
      <!-- warp-honour开始 -->
      <div class="honor .mar">
        <h2>荣誉资质</h2>
        <div class="certificate">
          <ul class="flex flex-between flex-row flex-wrap">
            <li :key="item.id" v-for="item in desc">
              <img :src="item.src" width="300" height="340" alt="honour" />
              <p>{{ item.des }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- warp-honour结束 -->
      <!-- warp-contact-us开始 -->
      <div class="con-contact-us">
        <div class="warp-contact-us flex flex-row">
          <img
            class="map"
            src="@/assets/img/about-us/map.png"
            width="869"
            height="509"
            alt="map"
          />
          <div class="tel-contact-us flex column flex-evenly">
            <h2>联系我们</h2>
            <ul class="column-contact-us flex column">
              <li class="flex" :key="item.id" v-for="item in contact">
                <img :src="item.src" width="30" height="30" alt="dz" />
                <div>
                  <p>{{ item.tel }}</p>
                  <p>{{ item.num }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </banner-bottom>
  </div>
</template>

<script>
import BannerBottom from "./components/BannerBottom.vue";
export default {
  name: "Aboutus",
  components: {
    BannerBottom,
  },
  data() {
    return {
      desc: [
        {
          src: require("@/assets/img/about-us/7.png"),
          des: "中国银联A类优秀供应商",
        },
        {
          src: require("@/assets/img/about-us/6.png"),
          des: "中国银联A类优秀供ying商",
        },
        {
          src: require("@/assets/img/about-us/8.png"),
          des: "年号卡新零售创新奖",
        },
        {
          src: require("@/assets/img/about-us/1.png"),
          des: "虚拟运营商计费业务最佳服务奖",
        },
        {
          src: require("@/assets/img/about-us/2.png"),
          des: "阿里汽车优秀服务商",
        },
        {
          src: require("@/assets/img/about-us/3.png"),
          des: "“国家级高新技术企业”证书",
        },
        {
          src: require("@/assets/img/about-us/4.png"),
          des: "软件企业认定证书",
        },
        {
          src: require("@/assets/img/about-us/5.png"),
          des: "软件企业",
        },
        {
          src: require("@/assets/img/about-us/9.png"),
          des: "国家信息安全等保三级认证",
        },
        {
          src: require("@/assets/img/about-us/10.png"),
          des: "质量管理体系认证证书",
        },
        {
          src: require("@/assets/img/about-us/11.png"),
          des: "山东省软件和信息服务业协会会员单位",
        },
        {
          src: require("@/assets/img/about-us/12.png"),
          des: "增值电信业务经营许可证",
        },
      ],
      contact: [
        {
          src: require("@/assets/img/about-us/dz.png"),
          tel: "地址",
          num: "山东省烟台市莱山区飞龙天润大厦14F",
        },
        {
          src: require("@/assets/img/about-us/dz.png"),
          tel: "商务合作",
          num: "156-6806-1789范经理（微信同号）",
        },
        {
          src: require("@/assets/img/about-us/dz.png"),
          tel: "客服电话（7*24小时）",
          num: "400-081-7007",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style  lang="scss" scoped>
.top {
  background-color: #fff;
}

.top .nav a {
  color: #999;
}

.top .nav a:hover {
  color: #ff7200;
}
.mar {
  margin: 0 auto;
}
.w1200 {
  width: 1200px;
  margin: 0 auto;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-evenly {
  justify-content: space-evenly;
}

.bdra6 {
  border-radius: 6px;
}

/* banner-style start */
.banner {
  height: 250px;
  padding-top: 80px;
  background: #ccc url(@/assets/img/about-us/banner.png) no-repeat center/cover;
}

/* banner-style end */

/* warp-about-us-style start */
.aboutus {
  background-color: #f9f9fa;
  height: 730px;
}

.about-cont {
  text-align: center;
  position: relative;
}

.aboutus .about-cont h2 {
  padding-top: 83px;
  font-size: 30px;
  font-weight: 200;
}

.aboutus .about-cont img {
  position: absolute;
  top: 173px;
  left: 0;
  border-radius: 6px;
}

.aboutus .about-cont .cont {
  position: absolute;
  top: 215px;
  right: 0;
  z-index: 1;
  background-color: #fff;
  width: 719px;
  height: 401px;
  box-shadow: 0px 0px 13px 0px rgba(232, 232, 243, 0.27);
  text-align: left;
  border-radius: 6px;
}

.aboutus .about-cont .cont h3 {
  padding-top: 20px;
  padding-left: 57px;
  padding-bottom: 16px;
  color: #ff7200;
  font-size: 24px;
}

.aboutus .about-cont .cont .sss {
  margin-left: 57px;
  width: 36px;
  height: 3px;
  background-color: #ff7200;
}

.aboutus .about-cont .cont .aboutinfo {
  width: 601px;
  padding-top: 28px;
  margin: 0 59px;
  color: #666;
  font-size: 14px;
  line-height: 20px;
}
/* warp-about-us-style end */
/* warp-honour-style start */
.honor {
  text-align: center;
  padding-top: 106px;
}

.honor h2 {
  padding-bottom: 20px;
  font-size: 30px;
  font-weight: 200;
}
/* warp-honour-style end */

/* warp-contact-us start */
.tel-contact-us {
  width: 55%;
  height: auto;
  padding-top: 20px;
  background-color: #fbfbfb;
}

.warp-contact-us .map {
  width: 45%;
  height: auto;
}

.tel-contact-us h2 {
  padding-left: 10px;
  font-size: 30px;
  color: #333;
  font-weight: 200;
}

.column-contact-us li {
  position: relative;

  padding-bottom: 46px;
}

.column-contact-us div {
  align-self: flex-start;
}

.column-contact-us p:nth-of-type(1) {
  margin-bottom: 10px;
  font-size: 16px;
  color: #333;
}

.column-contact-us p:nth-of-type(2) {
  font-size: 18px;
  color: #666;
}
/* warp-contact-us end */
</style>